import React ,{useState}from 'react'
import { EllipsisOutlined, SearchOutlined } from '@ant-design/icons';
import  { ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, Dropdown, AutoComplete ,Input} from 'antd';

const valueEnum = {
  0: 'close',
  1: 'running',
  2: 'online',
  3: 'error',
};


const tableListDataSource = [];

const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];

for (let i = 0; i < 5; i += 1) {
  tableListDataSource.push({
    key: i,
    name: 'AppName',
    containers: Math.floor(Math.random() * 20),
    creator: creators[Math.floor(Math.random() * creators.length)],
    status: valueEnum[Math.floor(Math.random() * 10) % 4],
    createdAt: Date.now() - Math.floor(Math.random() * 2000),
    money: Math.floor(Math.random() * 2000) * i,
    progress: Math.ceil(Math.random() * 100) + 1,
    memo:
      i % 2 === 1
        ? '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴'
        : '简短备注文案',
  });
}


const index = () => {

    const [options, setOptions] = useState([]);
    const [inputValue, setInputValue] = useState("");
    const data = [
        { label: "女装", value: "women_clothing" },
        { label: "男装", value: "men_clothing" },
        { label: "女性保健", value: "women_health" },
        { label: "男性保健", value: "men_health" },
        { label: "女性用品", value: "women_goods" },
        { label: "男性用品", value: "men_goods" },
        { label: "男女鞋靴", value: "shoes" },
        { label: "女鞋子", value: "shoe" },
        { label: "白色T恤", value: "white_t_shirt" },
        { label: "黑色T恤", value: "black_t_shirt" },
        { label: "礼服", value: "dress" },
        { label: "裙装", value: "skirts" },
        { label: "女士手包", value: "women_handbags" },
        { label: "男士手包", value: "men_handbags" },
        { label: "饰品", value: "accessories" },
        { label: "男衣服", value: "clothes" },
        { label: "男鞋子", value: "shoesm" },
        { label: "男帽子", value: "hats" },
        { label: "手套", value: "gloves" },
        { label: "围巾", value: "scarves" },
        { label: "女包包", value: "bags" },
        { label: "墨镜", value: "sunglasses" },
        { label: "背带裤", value: "overalls" },
        { label: "牛仔裤", value: "jeans" },
        { label: "运动裤", value: "sweatpants" },
        { label: "男长袖衬衫", value: "long_sleeve_shirts" },
        { label: "女长袖衬衫", value: "long_sleeve_shirtss" },
        { label: "男短袖衬衫", value: "short_sleeve_shirts" },
        { label: "女短袖衬衫", value: "short_sleeve_shirtss" },
        { label: "男卫衣", value: "hoodies" },
        { label: "女卫衣", value: "hoodiess" },
        { label: "男针织衫", value: "sweaters" },
        { label: "女针织衫", value: "sweaterss" },
        { label: "夹克", value: "jackets" }
      ];
    
    const handleSearch = (value) => {
        if (value) {
          const filteredOptions = data.filter((option) =>
            option.label.toLowerCase().includes(value.toLowerCase())
          );
          setOptions(filteredOptions);
          setInputValue(value);
        } else {
          setOptions([]);
          setInputValue("");
        }
      };
    
      const handleSelect = (value, option) => {
        const selectedOption = data.find((option) => option.value === value);
        console.log("Selected:", selectedOption.label);
        setInputValue(selectedOption.label);
        setOptions([]);
      };
    
    
    const renderOption = (item) => {
        return {
          value: item.value,
          children: item.label
        };
      };
    const columns = [
      {
        title: '排序',
        dataIndex: 'index',
        valueType: 'indexBorder',
        width: 48,
      },
      {
        title: '应用名称',
        dataIndex: 'name',
        render: (_) => <a>{_}</a>,
        // 自定义筛选项功能具体实现请参考 https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel
        filterDropdown: () => (
          <div style={{ padding: 8 }}>
            <Input style={{ width: 188, marginBlockEnd: 8, display: 'block' }} />
          </div>
        ),
        filterIcon: (filtered) => (
          <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
        ),
      },
      {
        title: '创建者',
        dataIndex: 'creator',
        valueEnum: {
          all: { text: '全部' },
          付小小: { text: '付小小' },
          曲丽丽: { text: '曲丽丽' },
          林东东: { text: '林东东' },
          陈帅帅: { text: '陈帅帅' },
          兼某某: { text: '兼某某' },
        },
      },
      {
        title: '状态',
        dataIndex: 'status',
        initialValue: 'all',
        filters: true,
        onFilter: true,
        valueEnum: {
          all: { text: '全部', status: 'Default' },
          close: { text: '关闭', status: 'Default' },
          running: { text: '运行中', status: 'Processing' },
          online: { text: '已上线', status: 'Success' },
          error: { text: '异常', status: 'Error' },
        },
      },
      {
        title: '备注',
        dataIndex: 'memo',
        // ellipsis: true,
        // copyable: true,
        renderFormItem:(item,{ type, defaultRender, formItemProps, fieldProps, ...rest },form) =>
        <AutoComplete
        style={{ width: '100%' }}
        options={options}
        onSelect={handleSelect}
        onSearch={handleSearch}
        placeholder="请输入搜索内容"
         value={inputValue}
      />
      
      },
      {
        title: '操作',
        width: 180,
        key: 'option',
        valueType: 'option',
        render: () => [
          <a key="link">链路</a>,
          <a key="link2">报警</a>,
          <a key="link3">监控</a>,
          <TableDropdown
            key="actionGroup"
            menus={[
              { key: 'copy', name: '复制' },
              { key: 'delete', name: '删除' },
            ]}
          />,
        ],
      },
    ];

  return (
    <ProTable
      columns={columns}
      request={(params, sorter, filter) => {
        console.log(params);
        // 表单搜索项会从 params 传入，传递给后端接口。
        console.log(params, sorter, filter);
        return Promise.resolve({
          data: tableListDataSource,
          success: true,
        });
      }}
      rowKey="key"
      pagination={{
        showQuickJumper: true,
      }}
      search={{
        layout: 'vertical',
        defaultCollapsed: false,
      }}
      dateFormatter="string"
      toolbar={{
        title: '高级表格',
        tooltip: '这是一个标题提示',
      }}
      toolBarRender={() => [
        <Button key="danger" danger>
          危险按钮
        </Button>,
        <Button key="show">查看日志</Button>,
        <Button type="primary" key="primary">
          创建应用
        </Button>,

        <Dropdown
          key="menu"
          menu={{
            items: [
              {
                label: '1st item',
                key: '1',
              },
              {
                label: '2nd item',
                key: '2',
              },
              {
                label: '3rd item',
                key: '3',
              },
            ],
          }}
        >
          <Button>
            <EllipsisOutlined />
          </Button>
        </Dropdown>,
      ]}
    />
  )
}

export default index